<template>
    <profileHeader class="container-middle" :userInfo="userInfo" :isSelf="isSelf"></profileHeader>
    <el-affix
        :offset="53"
        @change="affixChange"
        :class="{ 'affix-sticky': isSticky }"
    >
        <div
            class="container-middle profile-nav"
            :class="{ 'is-sticky': isSticky }"
            :style="{ 'margin-top': isSticky ? '0px' : '15px' }"
        >
            <avatar v-if="isSticky" :url="myInfo?.avatar"></avatar>
            <el-tabs
                v-model="currentPage"
                class="tabs-wrap"
                @tab-click="handleClick"
            >
                <el-tab-pane name="article" label="文章"></el-tab-pane>
                <el-tab-pane name="dynamic" label="动态"></el-tab-pane>
                <el-tab-pane name="collect" label="收藏"></el-tab-pane>
                <el-tab-pane name="following" label="关注"></el-tab-pane>
                <el-tab-pane name="follow" label="粉丝"></el-tab-pane>
            </el-tabs>
            <template v-if="isSticky">
                <el-button v-if="isSelf">编辑个人资料</el-button>
                <el-button v-else type="primary">关注</el-button>
            </template>
        </div>
    </el-affix>
    <div class="container-middle tabs-content">
        <RouterView></RouterView>
        <p v-for="item in 1000" :key="item">
            {{ item }}
        </p>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { TabsPaneContext } from 'element-plus'
import profileHeader from './userinfo-page/header.vue'
import avatar from '@/components/common/avatar.vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const route = useRoute()
const userStore = useUserStore()
const { myInfo, userInfo } = storeToRefs(userStore)
const pageId = ref<number>(parseInt(route.params.id as string))

// 吸顶监听
const isSticky = ref<boolean>(false)
const affixChange = (state: boolean): void => {
    isSticky.value = state
}

// 判断是否为自己
const isSelf = computed(() => myInfo.value?.user_id === pageId.value)

// 选中的页面id
const currentPage = ref<string>('user')
const handleClick = (tab: TabsPaneContext): void => {
    console.log(tab)
}

// 头像id
</script>
<style lang="less" scoped>
.profile-nav {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    .el-tabs {
        --el-tabs-header-height: 48px;
    }
}

.is-sticky {
    border: 0;
    .profile-nav {
        border: 0;
    }
}

.affix-sticky {
    :deep(.el-affix--fixed) {
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-border);
    }
}

.tabs-wrap {
    flex: 1;
    background-color: var(--color-white);
    :deep(.el-tabs__header) {
        margin: 0;
    }
    :deep(.el-tabs__nav-wrap) {
        padding: 0 15px;
        &:after {
            height: 0;
        }
    }
}

.tabs-content {
    padding: 0 15px 15px 15px;
    background-color: var(--color-white);
    min-height: 42px;
}
</style>
